/*
 * @Date: 2023-12-22 13:31:36
 * @LastEditors: lyx
 * @LastEditTime: 2024-03-06 14:40:25
 * @FilePath: \taro-template3\src\components\RecommendationProblem\index.tsx
 * @Description: 推荐问题
 */
import { View } from "@tarojs/components";
import styles from "./index.module.scss";
import { useContext, useMemo } from "react";
import { ChatContext } from "@/pages/index/hooks/store";
import { IRecommendationProblemProps } from "types/RecommendationProblem";
import defaultImg from "@/assets/images/chat/defaultQuesIcon.png";
import { IconFont } from "@nutui/icons-react-taro";

function RecommendationProblem(props: IRecommendationProblemProps) {
  const { recommended } = props;
  const { handle } = useContext(ChatContext);

  const { recommendationList, chatId } = useMemo(() => {
    return {
      chatId: recommended?.chatId ?? '',
      recommendationList: recommended?.content ?? [],
    }
  }, [recommended]);

  return (
    <View className={styles["recommendation-problem-wrapper"]}>
      <View className={styles["tip"]}>您可以问我</View>
      <View className={styles["recommendation-problem-items"]}>
        {recommendationList.map((item: string, index) => (
          <View
            key={index}
            className={styles["recommendation-problem-item"]}
            onClick={() => {
              handle(item, { parentMsgId: chatId });
            }}
          >
            <View
              className={styles["item-text"]}
            >
              {item}
            </View>
            <IconFont
              name={defaultImg}
              size="1rem"
            />
          </View>
        ))}
      </View>
    </View>
  );
}

export default RecommendationProblem;
